<template>
  <div class="customer-service-config">
    <h4>客服设置</h4>
    <!-- 使用 v-if 确保在数据加载完成前不渲染 -->
    <el-form label-position="top" v-if="config">
      <el-form-item label="客服标题">
        <el-input v-model="config.title" placeholder="例如：添加客服二维码" />
      </el-form-item>
      <el-form-item label="服务时间">
        <el-input v-model="config.workingHours" placeholder="例如：早上 9:00 - 22:00" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="config.phone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="客服二维码">
         <p class="tip">建议图片尺寸: 200*200像素; 图片格式: jpg, png, jpeg</p>
        <!-- 使用图片上传组件 -->
        <image-upload v-model="config.qrCode" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'; // 引入若依的图片上传组件

export default {
  name: "CustomerServiceConfig",
  components: {
    ImageUpload
  },
  props: {
    // 使用 v-model 接收来自父组件的配置数据
    value: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 创建一个可写的计算属性来代理 prop，从而实现 v-model
    config: {
      get() {
        // 在访问深层属性前，确保父级对象存在，防止渲染错误
        // 使用 $set 来保证新增的属性是响应式的
        if (!this.value.title) this.$set(this.value, 'title', '添加客服二维码');
        if (!this.value.workingHours) this.$set(this.value, 'workingHours', '早上 9:00 - 22:00');
        if (!this.value.phone) this.$set(this.value, 'phone', '');
        if (!this.value.qrCode) this.$set(this.value, 'qrCode', '');
        return this.value;
      },
      set(newValue) {
        // 当内部数据变化时，通知父组件更新
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

<style scoped>
.tip {
  color: #999;
  font-size: 12px;
  margin-top: 0;
}
</style>
